<template>
  <div id="nav" class="p-6">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/contacts">Contacts</router-link> |
    <router-link to="/test">不使用布局</router-link>
  </div>
</template>

<script>
export default {
  name: 'AppLayoutLinks'
}
</script>

<style scoped lang="scss">

@layer utilities {

  #nav a {
    @apply font-bold text-primary
  }

  #nav a.router-link-exact-active{
    @apply text-active
  }
  }

</style>
